<template>
  <div>
    <el-row :gutter="6">
      <el-form
        ref="boxForm"
        :model="boxData"
        :rules="rules"
        size="mini"
        label-width="60px"
      >
        <el-card>
          <span class="title-icon">关联主单号,袋号</span>
        </el-card>
        <el-card :span="24" style="margin-top: 5px">
          <el-row style="margin-top: 15px">
            <el-col :span="4">
              <el-form-item label="主单号" prop="orderNo">
                <el-input
                  v-model="boxData.orderNo"
                  @keyup.enter.native="checkorderNo"
                  ref="orderNo"
                  placeholder="请输入主单号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="袋号" prop="bagNo">
                <el-input
                  v-model="boxData.bagNo"
                  placeholder="请输入袋号"
                  clearable
                  ref="bagNo"
                  @keyup.enter.native="addRelevance"
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
                  &nbsp;
            </el-col>
            <el-col :span="3">
              <el-button
                type="primary"
                @click="submitForm"
                size="mini"
                style="margin-top: 5px; float: center; margin-left: 72%"
                >关联完成</el-button
              >
            </el-col>
          </el-row>
        </el-card>
        
        <div id="result_id" style="margin-top: 10px;">
          <el-card style="height: 100%">
            <el-col
              :span="24"
              style="margin-top: 15px;">
              <el-table :data="instockData" style="width: 100%">
                <el-table-column prop="sorted" label="序号">
                </el-table-column>
                <el-table-column prop="orderNo" label="主单号" >
                </el-table-column>
                <el-table-column prop="bagNo" id="bagnoId" label="袋号" >
                </el-table-column>
                <el-table-column prop="optResult" label="操作结果">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope" v-if="scope.row.optResult==='关联成功'">
                    <el-button
                      @click="undoRelevance(scope.row)"
                      type="text"
                      size="small"
                      >撤销</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            
          </el-card>
        </div>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  components: {},
  props: [],
  data() {
    return {
      boxData: {
        orderNo: "",
        bagNo: ""
      },
      instockData: [
 //       {
 //          sorted: 0,
 //          orderNo: "",
 //          bagNo: "",
 //          optResult: ''
 //        }
      ],
      rules: {
        orderNo: [
          {
            required: true,
            message: "请输入主单号",
            trigger: "blur",
          },
        ],
        bagNo: [
          {
            required: true,
            message: "请输入袋号",
            trigger: "blur",
          },
        ]
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //获取焦点
    nextInput(ref) {
      this.$refs[ref].focus();
    },

    submitForm() {
        var data = {}
        var bagNos = []
        this.instockData.forEach(item =>{
           if(item.optResult==="关联成功"){
             let bag = {}
             bag["bagNo"] = item.bagNo
             bag["id"] = item.sorted
             bagNos.push(bag)
          }
        })
        console.info("push--->2" , bagNos)
        data["orderNo"] = this.boxData.orderNo
        data["bagNos"] = bagNos
          ajax("save",data).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            }else{
              this.boxData.orderNo = ""
              this.boxData.bagNo = ""
              this.instockData =[]
              this.$nextTick(_ => {
                  this.$refs.orderNo.$refs.input.focus();
              });
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    undoRelevance(val){
      val.optResult = '撤销关联'
      console.info(val)
    },
    resetForm() {
      this.$refs["boxForm"].resetFields();
    },
    addRelevance(){
       console.info(this.boxData.orderNo)
       if(JSON.stringify(this.boxData.orderNo) === "{}" || this.boxData.orderNo.length==null || this.boxData.orderNo.length==0){
         this.$message.error('请输入主单号');
         return 
       }else if(JSON.stringify(this.boxData.bagNo) === "{}" || this.boxData.bagNo.length==null || this.boxData.bagNo.length==0){
         this.$message.error('请输入袋号');
         return 
       }else{

        var data = {};
        data["orderNo"] = this.boxData.bagNo;
         ajax("checkBagNo",data).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            }else{
              const sorted = this.instockData.length
              const relevanceMap ={"sorted" : sorted + 1,"orderNo":this.boxData.orderNo,"bagNo":this.boxData.bagNo,"optResult":"关联成功"} 
              this.instockData.unshift(relevanceMap)
            }
          },
          error => {
            console.log(error);
          }
        );
       }

       

    },
    checkorderNo() {
      console.log("checkorderNo!");
      
      if (JSON.stringify(this.boxData.orderNo) === "{}" || this.boxData.orderNo.length==null || this.boxData.orderNo.length==0) {
        this.$message.error('请输入主单号');
      } else {
        var data = {};
        data["orderNo"] = this.boxData.orderNo;
        ajax("checkOrderNo",data).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            }else{
              this.$nextTick(_ => {
                  this.$refs.bagNo.$refs.input.focus();
              });
            }
          },
          error => {
            console.log(error);
          }
        );
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
</style>
